<template>
  <!-- 药品管理首页 -->
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="药 品 订 单">
      <mt-button icon="back" @click="goBack" slot="left">返回</mt-button>
      <mt-button slot="right" @click="goBack">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>
    <!-- 搜索 -->
    <van-search
      v-model="searchTxt"
      show-action
      placeholder="请输入病人姓名"
      @clear="onCancel"
      @search="onSearch"
      @cancel="onCancel"
    />

    <!-- 下拉刷新 -->
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      success-text="刷新成功"
    >
      <!-- 顶部按钮 -->
      <div class="TopBtns">
        <div class="bottomBtnItems">
          <van-button type="info" size="small" block @click="checkList1"
            >未取药</van-button
          >
          <van-button type="warning" size="small" block @click="checkList2"
            >已取药</van-button
          >
        </div>
      </div>
      <!-- 数据列表区域 -->
      <van-collapse v-model="activeNames">
        <van-collapse-item
          v-for="(item, index) in drugList"
          :key="index"
          :title="item.name"
          :value="item.status == 0 ? '未取药' : '已取药'"
          :label="'药品数量：' + item.num"
        >
          <p class="effecct">药品名称：{{ item.medication }}</p>
          <p class="effecct">病人身份证：{{ item.id_card }}</p>
          <p class="effecct">订单编号：{{ item.id }}</p>
          <p class="effecct">开药时间：{{ item.create_time }}</p>
          <div class="addBtn" v-if="!item.status">
            <van-button
              type="primary"
              size="small"
              round
              :disabled="item.status == 0 ? false : true"
              @click="BtnClick(item.id)"
              >&nbsp;&nbsp;取&nbsp;药&nbsp;&nbsp;</van-button
            >
          </div>
        </van-collapse-item>
      </van-collapse>
    </van-pull-refresh>

    <!-- 底部按钮 -->
    <div class="bottomBtns">
      <div class="bottomBtnItems">
        <van-button
          type="primary"
          size="large"
          block
          color="linear-gradient(to right, #26de81, #20bf6b)"
          @click="ToRecord"
          >出入库记录</van-button
        >
        <van-button
          type="primary"
          size="large"
          block
          color="linear-gradient(to right, #00b894, #55efc4)"
          @click="ToManage"
          >药房库存</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Dialog } from "vant";
export default {
  name: "Drugmanage",

  data() {
    return {
      isLoading: false,
      searchTxt: "", //搜索的字段
      activeNames: ["1"],
      statusFlag: 0,
      //药品列表数组
      drugList: [],
      drugList1: [],
      drugList2: [],
    };
  },

  mounted() {},
  created() {
    this.getDrugOrder();
  },
  methods: {
    //获取取药订单(所有的)
    getDrugOrder() {
      this.$http
        .get("drug/getOrder?size=100&current=1&status=0", {})
        .then((res) => {
          this.drugList1 = res.data.data;
          this.drugList = this.drugList1;
        })
        .catch(() => {
          Toast("当前登录用户没有权限访问");
          setTimeout(() => {
            this.$router.push({
              path: "./index",
            });
          }, 2000);
        });
      this.$http
        .get("drug/getOrder?size=100&current=1&status=1", {})
        .then((res) => {
          this.drugList2 = res.data.data;
        });
    },
    //下拉刷新时触发事件
    onRefresh() {
      console.log(6);
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },
    goBack() {
      this.$router.push({
        path: "./index",
      });
    },
    //手机键盘点击搜索
    onSearch() {
      this.$http
        .get("drug/getOrder", {
          params: {
            size: 100,
            current: 1,
            status: this.statusFlag,
            name: this.searchTxt,
          },
        })
        .then((res) => {
          console.log(res);
          this.drugList = res.data.data;
        });
      //console.log(this.searchTxt);
    },
    //点击取消按钮
    onCancel() {
      this.getDrugOrder()
    },
    //取药按钮点击
    BtnClick(id) {
      Dialog.alert({
        title: "提示",
        message: "是否确认取药？订单编号为" + id,
        showCancelButton: true,
        confirmButtonColor: "#07c160",
        cancelButtonColor: "#ff976a",
      })
        .then(() => {
          // this.confirmGo(this.id);
          // console.log("当前取药id：" + id);
          this.drugout(id);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //取药数据接口
    drugout(id) {
      this.$http
        .get("drug/getDrug/" + id, {})
        .then((res) => {
          console.log(res);
          Toast("取药成功");
          setTimeout(() => {
            location.reload();
          }, 800);
        })
        .catch(() => {
          Toast("操作失败，请稍后再试");
        });
    },
    //切换列表渲染数据
    checkList1() {
      this.drugList = this.drugList1;
      this.statusFlag = 0;
    },
    checkList2() {
      this.drugList = this.drugList2;
      this.statusFlag = 1;
    },
    //查看入库点击
    ToRecord() {
      this.$router.push({
        path: "./DrugRecord",
      });
    },
    //药房库存点击
    ToManage() {
      this.$router.push({
        path: "./DrugManage",
      });
    },
  },
};
</script>

<style lang="less" scoped>
#app /deep/ .mint-header-title {
  overflow: initial;
}
#app /deep/ .van-collapse {
  margin-bottom: 50px;
}
.effecct {
  margin: 0 0 10px 0;
}
.addBtn {
  display: flex;
  flex-direction: row-reverse;
  padding: 10px 15px 0 0;
}
.van-stepper {
  display: inline-block;
}

.bottomBtns {
  width: 100%;
  position: fixed;
  bottom: 0;
}
.bottomBtnItems {
  display: flex;
}
.recordTitle {
  text-align: center;
  font-weight: 700;
  font-size: 20px;
}
.van-pull-refresh {
  margin-bottom: 50px;
}
#app /deep/ .van-cell__right-icon {
  margin-top: 5px;
}
</style>